<template>
  <div class="model"
  :class="{'hidden': loading}"
  v-loading="loading" :style="{'background': params.backgroundColor}">
    <!-- 分享 -->
    <div class="share-layer"
      v-if="shareShow">
      <div class="share-layer-content"
        :style="`border: 10px solid ${params.rankBorderColor}`">
        <i class="iconfont icon-jiaoyitingzhi" @click="handleCloseShare"></i>
        <p class="activitySubTitle" :style="`color: ${params.backgroundColor}`">
          {{params.shareTitle}}
        </p>
        <p class="copyUrl clearfix">
          <span class="fl" :style="`background: ${params.rankBorderColor}; opacity: 0.3;`"></span>
          <span class="url-word">{{shareUrl}}</span>
          <span class="fr"
          v-clipboard:copy="shareUrl"
          v-clipboard:success="onCopy"
          v-clipboard:error="onError"
          :style="`background: ${params.rankBorderColor};
          color: ${params.buttonTitleColor}`">{{$t('activityChristmas2018.copy')}}</span>
        </p>
        <p class="shareDown">{{params.shareDescription}}</p>
      </div>
    </div>
    <div class="banner" :style="`background: url(${params.backgroundTopImage}) center center no-repeat`">
      <!-- <img :src="params.backgroundTopImage"> -->
    </div>
    <div class="rank">
      <div class="rank-title"
        :style="`color: ${params.titleColor};
        border: 3px solid ${params.titleColor};`">
        {{$t('activityChristmas2018.topTitle')}}
      </div>
      <div class="rank-main"
        v-if="open"
        :style="`box-shadow: 0 0 8px 0 ${params.rankBorderColor}; background: ${params.rankBackgroundColor}`">
        <div class="rank-content">
          <div class="myRank flexc" @click="handleToMyRank" v-if="myRank && login">{{$t('cpuNet.myRank')}}<i></i></div>
          <div class="rank-list">
            <div class="rank-list-title flex">
              <div>{{rankColumnNames[0]}}</div>
              <div style="text-align: left;">{{rankColumnNames[1]}}</div>
              <div class="rankVolume">{{rankColumnNames[2]}}</div>
              <div style="text-align: right; padding-right: 20px; margin-right: 0;">{{rankColumnNames[3]}}</div>
            </div>
            <!-- 排行榜 -->
            <div class="rank-list-content" id="rankList">
              <div class="content flex" v-for="item in list" :key="item.rank"
                :class="{'targetClass': (item.rank === promotionsRankVo.rank || item.rank === 101) && login}">
                <div class="first-icon flexc" v-if="item.rank === 1">
                  <img :src="params.rankFirstImage" alt="">
                </div>
                <div class="two-icon flexc" v-else-if="item.rank === 2">
                  <img :src="params.rankSecondImage" alt="">
                </div>
                <div class="three-icon flexc" v-else-if="item.rank === 3">
                  <img :src="params.rankThirdImage" alt="">
                </div>
                <div v-else-if="item.rank > 3">{{item.rank}}</div>
                <div v-else>--</div>
                <div style="text-align: left;">{{item.accountNo}}</div>
                <div style="text-align: right;">{{item.volume}}</div>
                <div style="margin-right: 0; padding-right: 20px; text-align: right;">
                  <span class="fr" v-if="item.awards">{{item.awards}}</span>
                  <span v-else>--</span>
                </div>
              </div>
            </div>
          </div>
          <!-- 个人数据 -->
          <div class="personal-info">
            <div class="flex"
              v-if="login"
              :style="`color: ${params.backgroundColor}`">
              <div class="headPortrait flexc">
                <div class="first-icon flexc" v-if="promotionsRankVo.rank === 1">
                  <img :src="params.rankFirstImage" alt="">
                </div>
                <div class="two-icon flexc" v-else-if="promotionsRankVo.rank === 2">
                  <img :src="params.rankSecondImage" alt="">
                </div>
                <div class="three-icon flexc" v-else-if="promotionsRankVo.rank === 3">
                  <img :src="params.rankThirdImage" alt="">
                </div>
                <div v-else>{{promotionsRankVo.rank || '--'}}</div>
              </div>
              <div style="text-align: left;">{{promotionsRankVo.accountNo || '--'}}</div>
              <div style="text-align: right;">{{promotionsRankVo.volume || '0.0000'}}</div>
              <div style="padding-right: 20px; margin-right: 0;">
                <span class="fr">{{promotionsRankVo.awards || '0.0000'}}</span>
              </div>
            </div>
            <div class="no-login flexc" v-else>
              <span @click="handleWalletPermission">{{$t('public.signIn')}}</span>
            </div>
          </div>
          <div class="tip" v-if="activityType === 1">
            {{$t('cpuNet.rankUpdate')}}
          </div>
          <div class="tip" v-else>
            &nbsp;
          </div>
          <!-- 分享/去交易按钮 -->
          <div class="rank-btn flexb" v-if="activityEnd">
            <div class="btn-trade" :class="{'btn-trade-disable' : !open}"
              :style="`color: ${params.buttonTitleColor};
              background: url(${params.rankButtonImage}) 0% 0% / 100% 100% no-repeat;`"
              @click="handleJumpTrade"
              v-if="login">
              {{$t('activityChristmas2018.toTrade')}}
            </div>
            <div class="btn-trade"
              :style="`color: ${params.buttonTitleColor};
              background: url(${params.rankButtonImage}) 0% 0% / 100% 100% no-repeat;`"
              v-else>
              <span @click="handleWalletPermission">{{$t('public.signIn')}}</span>
            </div>
            <div class="btn-share"
              :style="`color: ${params.buttonTitleColor};
              background: url('${params.rankButtonImage}') 0% 0% / 100% 100% no-repeat;`"
              @click="shareShow = true">
              {{$t('activityChristmas2018.toShare')}}
            </div>
          </div>
          <div class="rank-btn flexb" v-else>
            <div class="eventClosed"
              :style="`color: ${params.backgroundColor}`">{{$t('activity.eventClosed')}}</div>
          </div>
        </div>
      </div>
      <div class="rank-main rank-countdown"
        v-else
        :style="`box-shadow: 0 0 8px 0 ${params.rankBorderColor}; background: ${params.rankBackgroundColor}`">
        <div class="rank-content">
          <div class="countdown">
            <p >{{$t('activityChristmas2018.start')}}</p>
            <p :style="`color: ${params.rankBackgroundColor}`">{{$t('activityChristmas2018.launchingSoon')}}</p>
            <p :style="`color: ${params.buttonTitleColor}`">{{$t('activityChristmas2018.launchCountdown')}}</p>
            <p>{{cDate.days}}<span style="font-size: 35px">{{$t('tv.day1')}}</span>
            {{cDate.hours}}<span style="font-size: 35px">{{$t('tv.hour1')}}</span>
            {{cDate.minutes}}<span style="font-size: 35px">{{$t('tv.minute1')}}</span>
            {{cDate.seconds}}<span style="font-size: 35px">{{$t('tv.miao')}}</span></p>
            <p :style="`color: ${params.buttonTitleColor}`">{{$t('activityChristmas2018.activityTimeTitle')}}</p>
            <p :style="`color: ${params.buttonTitleColor}`">
              {{params.beginTime | dateFormatYMDF}} ~ {{params.endTime | dateFormatYMDF}} （{{handleGetTimeGMT()}}）
            </p>
          </div>
          <!-- 分享/去交易按钮 -->
          <div class="rank-btn flexb" v-if="activityEnd" style="margin-top: 40px;">
            <div class="btn-trade" :class="{'btn-trade-disable' : !open}"
              :style="`color: ${params.buttonTitleColor};
              background: url(${params.rankButtonImage}) 0% 0% / 100% 100% no-repeat;`"
              @click="handleJumpTrade">
              {{$t('activityChristmas2018.toTrade')}}
            </div>
            <div class="btn-share"
              :style="`color: ${params.buttonTitleColor};
              background: url('${params.rankButtonImage}') 0% 0% / 100% 100% no-repeat;`"
              @click="shareShow = true">
              {{$t('activityChristmas2018.toShare')}}
            </div>
          </div>
          <div class="rank-btn flexb" v-else style="margin-top: 40px;">
            <div class="eventClosed"
              :style="`color: ${params.backgroundColor}`">{{$t('activity.eventClosed')}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="detail">
      <div class="center">
        <div class="detail-title"
          :style="`color: ${params.titleColor};
          border: 3px solid ${params.titleColor};`">
          {{$t('activityChristmas2018.activityTitle')}}
        </div>
      </div>
      <div class="detail-content"
        :style="`border: 13px solid ${params.descriptionBorderColor};`"
        v-html="params.description">
      </div>
    </div>
  </div>
</template>

<script>
import { toFixed, countdown } from '@/utils/validate';
import moment from 'moment';

export default {
  name: 'model',
  data() {
    return {
      myRank: false, // 我的排行
      loading: true,
      login: false,
      shareShow: false, // 分享蒙版
      open: true, // false 开启倒计时
      activityEnd: true, // false活动结束
      accountNo: '',
      // backgroundColor: '', // 页面背景颜色
      params: {
        backgroundBottomImage: '',
        backgroundImage: '', // 背景图片
        backgroundColor: '#FC4C47', // 背景颜色
        backgroundTopImage: '', // banner图片
        bannerImage: '', // 交易页图片
        buttonTitleColor: '', // 按钮颜色
        description: '', // 详情内容
        descriptionBorderColor: '#D0021B', // 详情边框颜色
        rankBackgroundColor: '#D0021B', // 排行背景颜色
        rankBorderColor: '#FFE300', // 排行边框颜色
        rankButtonImage: 'http://ndt.340wan.com/upload/20181227/4481f8b972bd4e469af0d7db38da5e96.png', // 排行按钮背景
        rankFirstImage: 'http://ndt.340wan.com/upload/20181227/f3e1c99dfce94cc2a2417b26157aff13.png', // 排行第一图标
        rankSecondImage: 'http://ndt.340wan.com/upload/20181227/9ef6088fe8bd46e8a89736eeeed38fc5.png', // 排行第二图标
        rankThirdImage: 'http://ndt.340wan.com/upload/20181227/d776721f407e421bac6f036317972273.png', // 排行第三图标
        shareBorderColor: '', // 分享边框颜色
        shareDescription: '',
        shareTitle: '',
        title: '',
        titleColor: '',
        shareUrl: '',
        symbol: '', // 返回交易对
      },
      list: [{
        rank: 1,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 2,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 3,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 4,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 5,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 6,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 7,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 8,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 9,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }, {
        rank: 10,
        accountNo: '--',
        volume: '--',
        awards: '--'
      }],
      promotionsRankVo: { // 个人数据
        rank: '--',
        accountNo: '--',
        volume: '0.0000',
        awards: '0.0000',
      },
      rankColumnNames: '', // 排行标题
      cDate: {
        days: 0,
        hours: '00',
        minutes: '00',
        seconds: '00'
      },
      endtime: '',
      countdownTimer: null,
      prop: '',
      cancelGetData: null, // 结束轮询接口
      activityType: 1,
    }
  },
  watch: {
    '$store.state.app.scatter.identity': {
      handler: function listen() {
        const rankList = document.querySelector('#rankList');
        rankList.scrollTop = 0;
        this.myRank = false;
        this.handleGetData();
      },
      deep: true,
    },
    '$store.state.app.language': function change() {
      this.handleGetData();
      this.handlePromotionsResource();
    },
  },
  mounted() {
    const identity = this.$store.state.app.scatter.identity;
    if (identity) {
      this.accountNo = identity.accounts[0].name;
      this.login = true;
    }
    const path = this.$route.path;
    if (path.indexOf('swap') > -1) {
      this.activityType = 2
    }
    this.prop = this.$route.params.name;
    this.handlePromotionsResource();
    this.handleGetData();
    this.shareUrl = location.href;
    // 监听滚动条
    const rankList = document.querySelector('#rankList');
    rankList.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    if (this.countdownTimer) { // 结束倒计时
      clearInterval(this.countdownTimer);
    }
    if (this.cancelGetData) {
      clearTimeout(this.cancelGetData)
    }
    const rankList = document.querySelector('#rankList');
    rankList.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const rankList = document.querySelector('#rankList');
      const scrollTop = rankList.scrollTop;
      // 范围
      const min = (this.promotionsRankVo.rank - 1) * 70 - 700; // eslint-disable-line
      const max = (this.promotionsRankVo.rank + 10) * 70 - 700; // eslint-disable-line
      if (!this.promotionsRankVo.rank) return;
      // 判断我的排行出现范围
      if (scrollTop >= max || scrollTop <= min) {
        this.myRank = true;
      } else {
        this.myRank = false;
      }
    },
    handleToMyRank() {
      const rank = this.promotionsRankVo.rank;
      const rankList = document.querySelector('#rankList');
      if (rank) {
        rankList.scrollTop = rank * 70 - 700 + 210; // eslint-disable-line
        this.myRank = false;
      }
    },
    // 获取活动配置
    handlePromotionsResource() {
      const params = {
        promotionCode: this.prop,
        type: this.activityType
      };
      this.$http.get('/promotions/getPromotionsResource', { params }).then((res) => {
        if (res.code !== 0) {
          this.$message.error('This activity is wrong, or does not exist, please contact customer service!');
          this.$router.push('/');
          return;
        }
        document.title = `${res.promotionsResourceVo.title} - Newdex`;
        this.endtime = moment(res.promotionsResourceVo.beginTime).format('YYYY/MM/DD HH:mm:ss');
        // this.endtime = new Date('2018/12/28 10:50:50'); // test time
        const t = Date.parse(this.endtime) - Date.parse(new Date());
        const closeTime = moment(res.promotionsResourceVo.endTime).format('YYYY/MM/DD HH:mm:ss');
        const activityEnd = Date.parse(closeTime) - Date.parse(new Date());
        if (t > 0) {
          this.open = false;
        }
        if (activityEnd <= 0) {
          this.activityEnd = false;
        }
        this.handleCountdownStart();
        const promotionsResourceVo = res.promotionsResourceVo;
        if (promotionsResourceVo.backgroundBottomImage) {
          this.$set(this.params, 'backgroundBottomImage', promotionsResourceVo.backgroundBottomImage);
        }
        if (promotionsResourceVo.backgroundColor) {
          this.$set(this.params, 'backgroundColor', promotionsResourceVo.backgroundColor);
        }
        if (promotionsResourceVo.descriptionBorderColor) {
          this.$set(this.params, 'descriptionBorderColor', promotionsResourceVo.descriptionBorderColor);
        }
        if (promotionsResourceVo.rankBackgroundColor) {
          this.$set(this.params, 'rankBackgroundColor', promotionsResourceVo.rankBackgroundColor);
        }
        if (promotionsResourceVo.rankBorderColor) {
          this.$set(this.params, 'rankBorderColor', promotionsResourceVo.rankBorderColor);
        }
        if (promotionsResourceVo.rankButtonImage) {
          this.$set(this.params, 'rankButtonImage', promotionsResourceVo.rankButtonImage);
        }
        if (promotionsResourceVo.rankFirstImage) {
          this.$set(this.params, 'rankFirstImage', promotionsResourceVo.rankFirstImage);
        }
        if (promotionsResourceVo.rankSecondImage) {
          this.$set(this.params, 'rankSecondImage', promotionsResourceVo.rankSecondImage);
        }
        if (promotionsResourceVo.rankThirdImage) {
          this.$set(this.params, 'rankThirdImage', promotionsResourceVo.rankThirdImage);
        }
        if (promotionsResourceVo.shareDescription) {
          this.$set(this.params, 'shareDescription', promotionsResourceVo.shareDescription);
        }
        if (promotionsResourceVo.shareTitle) {
          this.$set(this.params, 'shareTitle', promotionsResourceVo.shareTitle);
        }
        if (promotionsResourceVo.title) {
          this.$set(this.params, 'title', promotionsResourceVo.title);
        }
        if (promotionsResourceVo.description) {
          this.$set(this.params, 'description', promotionsResourceVo.description);
        }
        if (promotionsResourceVo.titleColor) {
          this.$set(this.params, 'titleColor', promotionsResourceVo.titleColor);
        }
        if (promotionsResourceVo.backgroundTopImage) {
          this.$set(this.params, 'backgroundTopImage', promotionsResourceVo.backgroundTopImage);
        }
        if (promotionsResourceVo.symbol) {
          this.$set(this.params, 'symbol', promotionsResourceVo.symbol);
        }
        if (promotionsResourceVo.beginTime) {
          this.$set(this.params, 'beginTime', promotionsResourceVo.beginTime);
        }
        if (promotionsResourceVo.endTime) {
          this.$set(this.params, 'endTime', promotionsResourceVo.endTime);
        }
        if (promotionsResourceVo.buttonTitleColor) {
          this.$set(this.params, 'buttonTitleColor', promotionsResourceVo.buttonTitleColor);
        }
        if (promotionsResourceVo.shareBorderColor) {
          this.$set(this.params, 'shareBorderColor', promotionsResourceVo.shareBorderColor);
        }
        if (promotionsResourceVo.backgroundImage) {
          this.$set(this.params, 'backgroundImage', promotionsResourceVo.backgroundImage);
        }
        this.loading = false;
      });
    },
    // 登录授权
    handleWalletPermission() {
      const checkWallet = localStorage.getItem('checkWallet');
      if (!Number(checkWallet)) {
        this.$emit('listenWalletPermission', true);
        return;
      }
      this.$emit('listenWalletLogin', true);
    },
    // 获取排行等数据
    handleGetData() {
      const identity = this.$store.state.app.scatter.identity;
      if (identity) {
        this.accountNo = identity.accounts[0].name;
        this.login = true;
      }
      const params = {
        promotionCode: this.prop,
        limit: '100',
        accountNo: this.accountNo,
        type: this.activityType
      };
      this.$http.get('/promotions/getPromotionsRankInfo', { params }).then((res) => {
        if (res.code !== 0) {
          this.promotionsRankVo = {
            rank: '--',
            accountNo: this.accountNo || '--',
            volume: '--',
            awards: '--',
          };
          // this.$message.error(res.msg);
          return;
        }
        this.promotionsRankVo = res.promotionsRankVo;
        // 个人数据
        if (res.promotionsRankVo && res.promotionsRankVo.rank && this.login) {
          // 有个人排行
          this.promotionsRankVo = res.promotionsRankVo;
          this.promotionsRankVo.volume = this.promotionsRankVo && this.handleToFixed(this.promotionsRankVo.volume, 4);
          const rank = this.promotionsRankVo.rank;
          const rankList = document.querySelector('#rankList');
          const scrollTop = rankList.scrollTop;
          if (rank > 10 && scrollTop === 0) {
            this.myRank = true;
          }
          if (rank > 100) {
            const promotionsRankVo = res.promotionsRankVo;
            const promotionsRankList = res.promotionsRankList;
            promotionsRankVo.rank = 101;
            promotionsRankList[100] = res.promotionsRankVo;
          }
        }
        // } else if (res.promotionsRankVo && !res.promotionsRankVo.rank && this.login) {
        //   // 没个人排行
        //   const rankLen = res.promotionsRankList.length;
        //   const promotionsRankList = res.promotionsRankList;
        //   if (rankLen <= 10) {
        //     this.promotionsRankVo = {
        //       rank: rankLen + 1,
        //       accountNo: this.accountNo || '--',
        //       volume: '--',
        //       awards: '--',
        //     };
        //     this.list[rankLen] = this.promotionsRankVo;
        //   } else if (rankLen > 10 && rankLen < 100) {
        //     this.myRank = true;
        //     this.promotionsRankVo = {
        //       rank: rankLen + 1,
        //       accountNo: this.accountNo || '--',
        //       volume: '--',
        //       awards: '--',
        //     };
        //     promotionsRankList.push(this.promotionsRankVo);
        //   } else {
        //     this.myRank = true;
        //     // 没个人排行并且有100人
        //     this.promotionsRankVo.rank = 101;
        //     const promotionsRankVo = {
        //       rank: '--',
        //       accountNo: this.accountNo || '--',
        //       volume: '--',
        //       awards: '--',
        //     };
        //     promotionsRankList.push(promotionsRankVo);
        //   }
        // }
        // 排行标题
        if (res.rankColumnNames) {
          this.rankColumnNames = res.rankColumnNames.split(',');
        }
        // 排行列表
        if (res.promotionsRankList) {
          const rankData = res.promotionsRankList;
          rankData.forEach((v) => {
            const vv = v;
            if (Number(vv.volume) >= 10000) {
              vv.volume = parseInt(vv.volume, 10);
            } else {
              vv.volume = this.handleToFixed(vv.volume, 4);
            }
          });
          if (rankData.length <= 10) {
            const rankLen = rankData.length;
            const lists = this.list.slice(rankLen);
            rankData.push(...lists);
            this.list = rankData.splice(0, 10);
          } else {
            this.list = rankData;
          }
        }
        this.cancelGetData = setTimeout(() => {
          this.handleGetData();
        }, 12000);
      });
    },
    // 跳转到交易页
    handleJumpTrade() {
      if (!this.open) return;
      if (this.activityType === 2) {
        this.$router.push({
          name: 'swap'
        });
        return;
      }
      this.$router.push({
        path: `/trade/${this.params.symbol}`
      });
    },
    // 关闭分享
    handleCloseShare() {
      this.shareShow = false;
    },
    // 开始倒计时
    handleCountdownStart() {
      this.countdownTimer = setInterval(() => {
        this.handleCountdown()
      }, 1000);
    },
    handleCountdown() {
      if (this.cDate.total <= 0) {
        clearInterval(this.countdownTimer);
        // 倒计时结束
        // console.log('time over');
        this.open = true;
        return;
      }
      this.cDate = countdown(this.endtime);
    },
    onCopy() {
      this.$message.success(this.$t('myWallet.copySuccess'));
    },
    onError() {
      this.$message.error(this.$t('myWallet.copyError'));
    },
    // 数字截取 - 保留小数
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
    // 获取标准时区
    handleGetTimeGMT() {
      return /GMT[+|-]\d{4}/.exec(new Date())[0];
    }
  }
}
</script>

<style lang="scss" scoped>
$-background: #FC4C47;
/deep/ .el-loading-mask{
  background-color: rgba(255, 255, 255, 1);

  .el-loading-spinner{
    top: 15%;
  }
}
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 15px;
}
/*定义滚动条的轨道，内阴影及圆角*/
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, 0);
  border-radius: 0;
  background-color: rgba(0, 0, 0, 0);
  border-radius: 15px;
}
/*定义滑块，内阴影及圆角*/
::-webkit-scrollbar-thumb {
  /*width: 10px;*/
  /*height: 25px;*/
  -webkit-box-shadow: inset 0 0 0 rgba(0, 0, 0, .5);
  background-color: rgba(0, 0, 0, .5);
  border-radius: 15px;
}
.model {
  height: 100%;
  background: $-background;
  .share-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 100;
    .share-layer-content {
      position: absolute;
      top: 40%;
      left: 50%;
      width: 631px;
      // height: 310px;
      padding: 30px 20px;
      transform: translate(-50%, -50%);
      border: 10px solid red;
      background: #fff;
      border-radius: 30px;
      p {
        text-align: center;
      }
      .activitySubTitle {
        text-align: center;
        font-size: 22px;
        color: #D51741;
        padding: 0 30px;
        margin: 0 0 20px 0;
      }
      .copyUrl {
        position: relative;
        min-width: 300px;
        height: 57px;
        margin: 0 auto 20px;
        border-radius: 15px;
        overflow: hidden;
        span {
          height: 57px;
          line-height: 57px;
          font-size: 20px;
        }
        .fl {
          width: 80%;
          // background: rgb(250, 241, 212);
        }
        .url-word {
          position: absolute;
          // width: 80%;
          top: 0;
          left: 15px;
          z-index: 1000;
          color: #333;
          font-size: 18px;
          width: 426px;
          // overflow: ;
        }
        .fr {
          color: #753805;
          width: 20%;
          text-align: center;
          background: #FFB000;
          cursor: pointer;
        }
      }
      .shareDown {
        font-size: 16px;
        color: #39150C;
        padding: 0 30px;
      }
      .icon-jiaoyitingzhi {
        position: absolute;
        right: -30px;
        top: -30px;
        font-size: 30px;
        color: #fff;
        cursor: pointer;
      }
    }
  }
  .banner {
    width: 100%;
    margin: 0 auto 95px;
    max-height: 550px;
    min-height: 550px;
    height: 550px;

    img {
      display: block;
      width: 100%;
    }
  }
  .rank {
    width: 1200px;
    margin: 0 auto 0;
    text-align: center;
    .rank-title {
      display: inline-block;
      margin: 0 auto 30px;
      // line-height: 100px;
      font-size: 30px;
      padding: 15px 60px;
      // background-image: linear-gradient(0deg, #F55151 0%, #9F0404 100%);
      border: 2px solid #F8E71C;
      border-radius: 100px;
      color: #FFFD00;
    }
    .rank-main {
      width: 850px;
      // height: 937px;
      height: 1007px;
      margin: 0 auto 0;
      padding: 30px;
      background: #D0021B;
      box-shadow: 0 0 8px 0 #F8E71C;
      border-radius: 33px;
      .rank-content {
        position: relative;
        width: 100%;
        height: 100%;
        background: transparent;
        .myRank {
          position: absolute;
          bottom: 230px;
          left: 0;
          font-size: 14px;
          cursor: pointer;
          width: 96px;
          height: 40px;
          color: #fff;
          line-height: 40px;
          z-index: 1000;
          background-image: linear-gradient(-132deg, rgba(68,92,241,0.96) 0%, #3952C1 100%);
          border-radius: 0 47.2px 47.2px 0;
          i {
            margin-left: 4px;
            display: inline-block;
            width: 0;
            height: 0;
            border-top: 7px solid transparent;
            border-bottom: 7px solid transparent;
            border-left: 7px solid #fff;
          }
        }
        .tip {
          margin-top: 5px;
          text-align: right;
          color: #fff;
        }
        .rank-list {
          background: #fff;
          border-radius: 15px;
          .rank-list-title.flex {
            color:#333;
            height: 70px;
            overflow: hidden;
            font-size: 21px;
          }
          .rank-list-content {
            height: 700px;
            overflow-y: scroll;
            background: #fff;
            // border-radius: 0 0 15px 15px;
            .targetClass {
              color: #4A90E2 !important;
            }
            .flex {
              height: 70px;
            }
            img {
              width: 42px;
            }
          }
        }
        .personal-info {
          height: 70px;
          line-height: 70px;
          margin-top: 6.5px;
          border-radius: 0 0 15px 15px;
          background: #fff;

          .headPortrait {
            img {
              display: inline-block;
              // width: 60px;
              width: 42px;
            }
          }
          .flex {
            color: $-background;
            padding-right: 15px;
            overflow: hidden;
          }
          .no-login {
            // line-height: 100px;
            font-size: 24px;
            span {
              padding: 0 30px;
              cursor: pointer;
              &:hover {
                color:#278EDA;
              }
            }
          }
        }
        .flex {
          // line-height: 100px;
          text-align: center;
          font-size: 18px;
          color: #333;
          padding-right: 10px;
          overflow: hidden;
          div:nth-child(1) {
            flex: 1;
          }
          div:nth-child(2) {
            flex: 1.5;
          }
          div:nth-child(3) {
            flex: 1.5;
            text-align: right;
          }
          div:nth-child(4) {
            flex: 1.5;
          }
          div {
            overflow: hidden;
            min-width: 0;
            white-space: nowrap;
            margin-right: 5px;
          }
          .rankVolume {
            overflow: initial;
          }
        }
      }
    }
    .rank-countdown {
      height: 700px;
      .rank-content {
        // background: #fff;
        border-radius: 15px;
        .countdown {
          background: #fff;
          text-align: center;
          padding-bottom: 70px;
          border-radius: 15px;
          p:nth-child(1) {
            font-size: 45px;
            color: #D4163E;
            height: 50px;
          }
          p:nth-child(2) {
            font-size: 65px;
            color: #D4163E;
          }
          p:nth-child(3) {
            font-size: 24px;
            color: #AD0909;
            margin: 20px 0;
          }
          p:nth-child(4) {
            font-size: 72px;
            margin: 0 auto;
            width: 600px;
            line-height: 122px;
            height: 152px;
            text-align: center;
            background: #704016;
            color: #fff;
            border-radius: 20px;
            border: 15px solid #39150C;
          }
          p:nth-child(5), p:nth-child(6) {
            font-size: 21px;
          }
          p:nth-child(5) {
            margin-top: 50px;
          }
        }
      }
    }
    .rank-btn {
      padding: 0 130px;
      margin: 20px auto 0;
      div {
        position: relative;
        width: 239px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        font-size: 20px;
        border-radius: 18px;
        color: #704016;
        background-size: 100% 100%;
      }
      .btn-trade, .btn-share {
        cursor: pointer;
      }
      .btn-trade-disable {
        color: #fff !important;
        background: url('../../assets/img/activity/christmas/timeOutBtn.png') -6px -10px no-repeat !important;
        background-size: 444px 136px !important;
        cursor: no-drop;
      }
      .eventClosed {
        background: #fff;
        width: 100%;
      }
    }
  }
  .detail {
    width: 1200px;
    margin: 95px auto 0;
    padding-bottom: 100px;
    .detail-title {
      display: inline-block;
      margin: 0 auto 30px;
      min-width: 200px;
      font-size: 30px;
      padding: 15px 60px;
      // background-image: linear-gradient(0deg, #F55151 0%, #9F0404 100%);
      border: 2px solid #F8E71C;
      border-radius: 100px;
      color: #FFFD00;
    }
    .detail-content {
      width: 960px;
      min-height: 400px;
      margin: 0 auto;
      background: #FFFFFF;
      border: 13px solid #D0021B;
      border-radius: 33px;
      padding: 15px;
    }
  }
}
</style>
